<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-select v-model="filters.keyword" clearable placeholder="请选择角色">
						<el-option
						v-for="item in roleOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="list" highlight-current-row v-loading="listLoading"  style="width: 100%;">
			<el-table-column prop="id" label="ID" type="index" width="60">
			</el-table-column>
			<el-table-column prop="username" label="用户名" width="120">
			</el-table-column>
			<el-table-column prop="role" label="角色" width="140" :formatter="formatRole">
			</el-table-column>
			<el-table-column prop="phone" label="联系方式" width="140">
			</el-table-column>
			<el-table-column prop="openid" label="openid" min-width="120">
			</el-table-column>
			<el-table-column label="操作"  width="240">
				<template slot-scope="scope">
					<el-button  type="warning" size="small" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
					<el-button type="success" size="small" @click="handleMore(scope.row)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="editForm.username" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="editForm.password" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="editForm.role" placeholder="请选择角色">
						<el-option label="平台管理员" value="2"></el-option>
						<el-option label="店铺管理员" value="3"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="editForm.phone" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="editForm.email" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="openid" prop="openid">
					<el-input v-model="editForm.openid" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addForm.username" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addForm.password" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="addForm.role" placeholder="请选择角色">
						<el-option label="平台管理员" value="2"></el-option>
						<el-option label="店铺管理员" value="3"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="addForm.phone" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addForm.email" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
				<el-form-item label="openid" prop="openid">
					<el-input v-model="addForm.openid" auto-complete="off" class="form_input"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--更多界面-->
		<el-dialog title="查询详情" v-model="moreFormVisible" :close-on-click-modal="false">
			<el-form :model="moreForm" label-width="80px" ref="moreForm">
				<el-form-item label="用户名" prop="username">
					<span>{{moreForm.name}}</span>
				</el-form-item>
				<el-form-item label="密码" prop="username">
					<span>{{moreForm.pwd}}</span>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<span>{{moreForm.role}}</span>
				</el-form-item>
				
				<el-form-item label="联系方式" prop="phone">
					<span>{{moreForm.phone}}</span>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<span>{{moreForm.email}}</span>
				</el-form-item>
				<el-form-item label="openid" prop="openid">
					<span>{{moreForm.openid}}</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="moreFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
import util from "../../common/js/util";
//import NProgress from 'nprogress'
import {
  fetchSysUsers,
  addSysUser,
  editSysUser,
  removeSysUser,
  fetchSysUserDetail
} from "../../api/api";

export default {
  data() {
    return {
      filters: {
        keyword: ""
      },
      roleOptions: [
        {
          value: "2",
          label: "平台管理员"
        },
        {
          value: "3",
          label: "店铺管理员"
        }
      ],
      list: [],
      total: 0,
      currentPage: 1,
      listLoading: false,
      editFormVisible: false, //编辑界面是否显示
      editLoading: false,
      editFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }]
      },
      //编辑界面数据
      editForm: {
        username: "",
        password: "",
        role: "2",
        phone: "",
        email: "",
        openid: ""
      },

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }]
      },

      //新增界面数据
      addForm: {
        username: "",
        password: "",
        role: "2",
        phone: "",
        email: "",
        openid: ""
      },
      moreFormVisible: false,
      moreForm: {}
    };
  },
  methods: {
    formatRole(row, column) {
      return row.role == 2 ? "平台管理员" : "店铺管理员";
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //获取列表
    getList() {
      let para = {
        currentPage: this.currentPage,
        role: this.filters.keyword
      };
      this.listLoading = true;
      //NProgress.start();
      fetchSysUsers(para).then(res => {
        this.total = res.data.total;
        this.list = res.data.users;
        this.listLoading = false;
        //NProgress.done();
      });
    },
    //删除
    handleDel: function(row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          removeSysUser(row.id).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    //显示编辑界面
    handleEdit: function(row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },
    handleMore: function(row) {
      fetchSysUserDetail(row.id).then(res => {
        this.moreFormVisible = true;
        this.moreForm = Object.assign({}, res.data);
      });
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        username: "",
        password: "",
        role: "2",
        phone: "",
        email: "",
        openid: ""
      };
    },
    //编辑
    editSubmit: function() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.editForm);
            editSysUser(para).then(res => {
              this.editLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["editForm"].resetFields();
              this.editFormVisible = false;
              this.getList();
            });
          });
        }
      });
    },
    //新增
    addSubmit: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.addLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.addForm);
            addSysUser(para).then(res => {
              this.addLoading = false;
              //NProgress.done();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$refs["addForm"].resetFields();
              this.addFormVisible = false;
              this.getList();
            });
          });
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
.form_input {
  width: 320px;
}
</style>